<template>
  <RkContainer :isFooter="false"
    :isAside="isAside">
    <template #header_left></template>
    <template #header_right>
      <el-button type="primary"
        @click="addRoleClick">新增</el-button>
      <el-button type="danger"
        @click.stop="handleOperation({id:'1'})">删除
      </el-button>
    </template>
    <template #aside>
      <RkAdAgTree :adTreeHidden="false"
        :agTreeHidden="true"
        @toggleHidden="(hidden) => isAside = !hidden"
        @ad-node-click="handleAdNodeClick" />
    </template>
    <template #main>
      <rk-center>
        <template #content>
          <rk-grid ref="roleTableRef"
            :title="route.meta.title"
            data-url="/role/page"
            :columns="tableColumns"
            :params="queryParams"
            :box-config="true">
            <template #toolbar_title_buttons>
            </template>
            <template #operation="{ row }">
              <el-button type="primary"
                link
                @click.stop="handleOperation({id:'0'},row)">修改
              </el-button>
            </template>
          </rk-grid>
        </template>
      </rk-center>
    </template>
    <role-add-edit ref="roleAddEditRef"
      :ok="handleSearch"></role-add-edit>
  </RkContainer>
</template>

<script setup>
import { useRoute } from 'vue-router'
import { operationColumn } from '@/config/column-config.js'
import { useContainerAside } from '@/hooks'
import RoleAddEdit from "@/views/system/role/dialog/RoleAddEdit.vue";
import { RkConfirmBox } from "@/components/message-box/index.js";
import { provide, reactive, readonly, ref } from "vue";
import { useUserStore } from '@/stores/modules';
import { ElMessage } from "element-plus";
import { ROLE_SHARE_STATUS_ENUMS } from "@/enums/enums-role.js";
import { useRoleApi } from "@/api/index.js";

const { roleDelete } = useRoleApi();
const userInfo = useUserStore().userInfo

// 获取当前路由
const route = useRoute()

// ----- 树结构操作
const { isAside } = useContainerAside()

// ----- 表格相关操作
const queryParams = reactive({
  adCode: userInfo.adCode,
  agCode: userInfo.agCode,
  adName: userInfo.adName
})

provide('treeParams', readonly(queryParams))


const roleAddEditRef = ref(null)
const roleTableRef = ref(null)
const tableColumns = ref([
  {
    field: 'issys', title: '是否共享', width: 100, align: 'center',

    formatter: ({ cellValue, row, column }) => {
      if (cellValue) {
        return ROLE_SHARE_STATUS_ENUMS.options[cellValue + ''].echo
      }
      return "共享"
    }
  },
  { field: 'code', title: '角色编码', width: 150, align: 'left' },
  { field: 'name', title: '角色名称', width: 200, align: 'left' },
  {
    field: 'roleType', title: '角色类型', width: 100, align: 'center',
    formatter: ['enumsFormats', 'ROLE_TYPE_ENUMS']
  },
  {
    field: 'status', title: '状态', width: 80, align: 'center',
    cellRender: { name: 'enumsRender', enumName: 'ROLE_STATUS_ENUMS', isTag: true }
  },
  { field: 'adName', title: '区划', width: 100, align: 'center' },
  { field: 'remark', title: '说明', width: 180, align: 'left' },
  operationColumn(),
])

const tableOperation = ref([
  { id: "0", name: '修改' },
  { id: "1", name: '删除' },
])

const handleAdNodeClick = (obj) => {
  if (obj) {
    Object.assign(queryParams, { adCode: obj.code, adName: obj.name, agCode: '' })
    handleSearch()
  }
}
const addRoleClick = () => {
  roleAddEditRef.value.handleOpen({
    isEdit: false,
    data: { adName: queryParams.adName, province: queryParams.adCode }
  })
}
const handleOperation = (item, row) => {
  if (item.id === '0') {
    roleAddEditRef.value.handleOpen({ isEdit: true, data: row })
  } else if (item.id === '1') {
    const seleRows = roleTableRef.value.getCheckboxRecords()
    if (seleRows.length === 0 || !seleRows) {
      ElMessage.warning("请至少选择一条数据进行操作！");
      return
    }
    let guids = seleRows.map(item => {
      return item.guid
    })
    RkConfirmBox({
      title: '提示', content: "确定要删除吗", onSubmit: () => {
        //删除
        roleDelete({ roleIds: guids.join(",") }).then(resp => {
          if (resp.code === 200) {
            ElMessage.success("删除成功")
            handleSearch()
          } else {
            ElMessage.error(resp.msg)
          }
        })
      }
    })
  }
}
const handleSearch = () => {
  roleTableRef.value.searchEvent()
}


</script>

<style lang="scss" scoped>
</style>
